new Vue({
    el: "#container",
    data() {
        return {
            // 查询数据
            search: {
                searchVal: "",
                pageIndex: 0,
                limit: 50,
                total: 0,
            },
            // 白名单数据
            whiteUserList: [],
            tableLoading: false,
            // 绑定弹窗
            whiteUserDialog: {
                type: 0,
                title: "新增白名单",
                show: false,
                loading: false,
                url: "",
            },
            // 白名单数据
            whiteUserForm: {
                userId: null,
                userName: null,
                remarks: null,
            },
            whiteUserFormRules: {},
            searchUserLoading: false,
            userList: [],
        }
    },
    // 在模板渲染成html前调用
    created() {
        var that = this;
    },
    // 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    mounted() {
        var that = this;
        that.loadWhiteUser();
    },
    methods: {
        // 加载白名单数据
        loadWhiteUser: function () {
            let that = this;
            that.tableLoading = true;
            $.ajax({
                type: "POST",
                url: "/clock/in/white/user/page",
                async: true,
                dataType: 'json',
                data: that.search,
                success: function (res) {
                    if (res.code == 0) {
                        let page = res.data;
                        that.whiteUserList = page.records;
                        that.search.total = page.total;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询白名单失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.tableLoading = false;
                }
            })
        },
        // 修改每页数据
        handleSizeChange(val) {
            var that = this;
            that.search.limit = val;
            // 查询数据
            that.loadWhiteUser();
        },
        handleCurrentChange(val) {
            // 设置页数
            var that = this;
            that.search.pageIndex = val;
            that.loadWhiteUser();
        },
        /**
         * 显示弹窗
         * @param type      弹窗类型：0：新增；1：修改
         * @param data      修改数据
         */
        showDialog(type, data) {
            var that = this;
            if (type == 0) {
                // 新增
                that.whiteUserForm.realName = "";
                that.whiteUserForm.abbrName = "";
                that.whiteUserForm.bankName = "";
                that.whiteUserForm.bankNo = "";
                that.whiteUserForm.remark = "";
                that.whiteUserDialog.title = "新增白名单";
                that.whiteUserDialog.url = "/clock/in/white/user/save"
                that.whiteUserDialog.show = true;
            }
            if (type == 1) {
                // 修改
                if (data == null) {
                    that.$message({
                        showClose: true,
                        message: '请选择修改数据',
                        type: 'error'
                    });
                    return;
                }
                that.whiteUserForm.realName = data.realName;
                that.whiteUserForm.abbrName = data.abbrName;
                that.whiteUserForm.bankName = data.bankName;
                that.whiteUserForm.bankNo = data.bankNo;
                that.whiteUserForm.remark = data.remark;
                that.whiteUserDialog.title = "修改白名单";
                that.whiteUserDialog.url = "/clock/in/white/user/update/" + data.id;
                that.whiteUserDialog.show = true;
            }
        },
        /**
         * 删除
         */
        deleteWhiteUser(data) {
            var that = this;
            if (data == null) {
                that.$message({
                    showClose: true,
                    message: '请选择待删除数据',
                    type: 'error'
                });
                return;
            }
            that.$confirm('此操作将删除白名单【' + data.userName + '】，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.tableLoading = true;
                $.ajax({
                    type: "DELETE",
                    url: "/clock/in/white/user/delete/" + data.id,
                    async: true,
                    dataType: 'json',
                    data: {},
                    success: function (res) {
                        if (res.code == 0) {
                            that.loadWhiteUser();
                        } else {
                            that.$message({
                                showClose: true,
                                message: '删除失败：' + res.msg,
                                type: 'error'
                            });
                            return;
                        }
                    },
                    error: function (res) {
                        that.$message({
                            showClose: true,
                            message: '删除失败，请联系管理员',
                            type: 'error'
                        });
                        return;
                    },
                    complete: function (XMLHttpRequest, status) {
                        that.tableLoading = false;
                    }
                })
            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        /**
         * 提交数据
         */
        onSubmit(formName) {
            var that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.whiteUserDialog.loading = true;
                    $.ajax({
                        type: "PUT",
                        url: that.whiteUserDialog.url,
                        async: true,
                        dataType: 'json',
                        data: that.whiteUserForm,
                        success: function (res) {
                            if (res.code == 0) {
                                that.whiteUserDialog.show = false;
                                that.loadWhiteUser();
                            } else {
                                that.$message({
                                    showClose: true,
                                    message: '操作失败：' + res.msg,
                                    type: 'error'
                                });
                                return;
                            }
                        },
                        error: function (res) {
                            that.$message({
                                showClose: true,
                                message: '操作失败，请联系管理员',
                                type: 'error'
                            });
                            return;
                        },
                        complete: function (XMLHttpRequest, status) {
                            that.whiteUserDialog.loading = false;
                        }
                    })
                } else {

                    return false;
                }
            });
        },
        /**
         * 根据用户名,查询用户
         */
        searchUser(userName) {
            let that = this;
            $.ajax({
                type: "POST",
                url: "/sys_user/list",
                async: true,
                dataType: 'json',
                data: {
                    name: userName,
                    offset: 0,
                    limit: 100
                },
                success: function (res) {
                    if (res.code == 0) {
                        that.userList = res.data.records;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询用户失败:' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '操作失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.whiteUserDialog.loading = false;
                }
            })
        },
        /**
         * 选择的用户变化
         * @param data
         */
        userChange(data) {
            let that = this;
            const {id, name} = data;
            that.whiteUserForm.userId = id;
            that.whiteUserForm.userName = name;
        }
    }
})
